<template>
	<div>

		<el-row>
			<el-col :span="24" style="text-align: right;">

				<el-button type="primary" size="small" @click="add()">新增</el-button>
				<!--this.$data.level-->
				<el-button type="primary" size="small" @click="edit()">编辑</el-button>
				<el-button type="primary" size="small" @click="delteConfirm()">删除</el-button>
			</el-col>
		</el-row>

		<el-row :gutter="24">
			<!-- 参数树 -->
			<el-col :span="6" style="padding-right: 5px!important;padding-left: 15px!important">
				<el-tree :data="paramSetTreeData" :highlight-current=true :props="defaultProps" accordion @node-click="handleNodeClick" :auto-expand-parent=false node-key="id"></el-tree>
				<!--:filter-node-method="filterNode"-->
			</el-col>
			<el-col :span="18" style="padding-right: 0px!important;padding-left: 0px!important;">
				<el-table border stripe :data="params.dataList" style="width: 100%;height:480;" @selection-change="handleSelectionChange">
					<el-table-column type="selection" width="60" fixed>
					</el-table-column>
					<el-table-column prop="oilBrand" label="机油品牌" width="200">
					</el-table-column>
					<el-table-column prop="oilName" label="机油名称" width="200">
					</el-table-column>
					<el-table-column prop="oilType" label="机油类别" width="200">
					</el-table-column>
					<el-table-column prop="maintenanceMile" label="保养周期" width="200">
					</el-table-column>
				</el-table>
				<el-pagination small @current-change="handleCurrentChange" :current-page="curPage" :page-sizes="page.pageSizes" :page-size="page.pageSize" layout=" total,prev, pager, next" :total="params.total">
				</el-pagination>
			</el-col>

		</el-row>

		<el-dialog title="新增品牌" v-model="addShow" size="tiny">
			<el-row>

				<el-col :span="4" style="margin-right:10px;">
					<p class="queryLabel">机油品牌:</p>
				</el-col>
				<el-col :span="12">
					<el-input v-model="requestData.oilBrand" size="small" placeholder="请输入机油品牌"></el-input>
				</el-col>

				<el-col :span="24" style="text-align: right;">

					<el-button type="primary" size="small" @click="addShow = false">取消</el-button>
					<el-button type="primary" size="small" @click="save()">保存</el-button>
				</el-col>

			</el-row>
		</el-dialog>

		<el-dialog title="新增机油" v-model="addOilShow" size="tiny">
			<el-row>
				<el-row>
					<el-col :span="4" style="margin-right:10px;">
						<p class="queryLabel">当前品牌:</p>
					</el-col>
					<el-col :span="12">
						<el-input v-model="requestData.oilBrand" size="small" :disabled="true"></el-input>
					</el-col>
					<el-row>
					</el-row>
					<el-col :span="4" style="margin-right:10px;">
						<p class="queryLabel">机油名称:</p>
					</el-col>
					<el-col :span="12">
						<el-input v-model="requestData.oilName" size="small" placeholder="请输入"></el-input>
					</el-col>
				</el-row>

				<el-row>
					<el-col :span="4" style="margin-right:10px;">
						<p class="queryLabel">机油类型:</p>
					</el-col>
					<el-col :span="12">
						<!--<el-input v-model="requestData.oilType" size="small" placeholder="请输入"></el-input>-->
						
						<el-select size="small"
						           v-model="requestData.oilType"
						           placeholder="请选择"
						           readonly>
							<el-option v-for="item in oilTypeCombo"
							           :label="item.label"
							           :value="item.value"></el-option>
						</el-select>
						
					</el-col>
				</el-row>

				<el-row>
					<el-col :span="4" style="margin-right:10px;">
						<p class="queryLabel">公里数:</p>
					</el-col>
					<el-col :span="12">
						<el-input v-model="requestData.maintenanceMile" size="small" placeholder="请输入"></el-input>
					</el-col>
				</el-row>

				<el-col :span="24" style="text-align: right;">

					<el-button type="primary" size="small" @click="addOilShow = false">取消</el-button>
					<el-button type="primary" size="small" @click="save()">保存</el-button>
				</el-col>

			</el-row>
		</el-dialog>

	</div>
</template>
<script>
	export default {
		data: function() {
			return {
				addShow: false,
				addOilShow: false,
				pId: "",
				level: "0",
				id: "",
				brandName: "",
				requestData: {

					id: "",
					oilName: "",
					oilBrand: "",
					oilType: "",
					maintenanceMile: "",
					level: "0",
					pId: "",
					conpanyId: ""

				},
				oilTypeCombo: [{
					label: '矿物油',
					value: '矿物油'
				}, {
					label: '半合成机油',
					value: '半合成机油'
				}, {
					label: '全合成机油',
					value: '全合成机油'
				}],

				tBcOilEntityEmpty: {
					id: "",
					oilName: "",
					oilBrand: "",
					oilType: "",
					maintenanceMile: "",
					level: "0",
					pId: "",
					conpanyId: ""
				},

				//参数树
				paramSetTreeData: [],
				//分页设置
				page: this.page,
				//当前分组页
				curPage: 1,
				params: {
					dataList: [],
					total: 0
				},
				//树型数据配置
				defaultProps: {
					children: 'child',
					label: 'treeName'
				},

				multipleSelection: []
			}
		},
		methods: {
			//复选框回调函数
			handleSelectionChange: function(val) {
				debugger;
				this.$data.multipleSelection = val;
			},
			// 新增
			add: function() {
				var level = Number(this.$data.requestData.level);
				debugger;
				if(this.$data.requestData.level == '0') { // 新增0层数据
					debugger;
					this.$data.requestData = Object.assign(this.$data.requestData, this.$data.tBcOilEntityEmpty);
					this.$data.requestData.level = level;
					this.$data.requestData.pId = this.$data.pId;
					//this.$data.requestData.oilBrand = this.$data.brandName;
					this.$data.addShow = true;
				} else if(this.$data.requestData.level == '1') { // 新增1层数据
					debugger;
					this.$data.requestData = Object.assign(this.$data.requestData, this.$data.tBcOilEntityEmpty);
					this.$data.requestData.level = level;
					this.$data.requestData.pId = this.$data.pId;
					//this.$data.requestData.oilBrand = this.$data.brandName;
					this.$data.addShow = true;
				} else if(this.$data.requestData.level == '2') { // 新增2层数据
					this.$data.requestData = Object.assign(this.$data.requestData, this.$data.tBcOilEntityEmpty);
					this.$data.requestData.level = level;
					this.$data.requestData.pId = this.$data.pId;
					this.$data.requestData.oilBrand = this.$data.brandName;
					this.$data.addOilShow = true;
				} else {
					this.$message({
						type: 'warning',
						message: '当前目录下不可新增'
					});
				}

			},
			save: function() {
				if(this.$data.requestData.level == "1") {
					debugger;
					this.saveBrand();
				} else {
					debugger;
					this.$http({
						method: 'POST',
						url: this.API_ROOT + '/oil/saveOrUpdate',
						body: this.$data.requestData,
						params: {}
					}).then(function(resp) {
						this.$message(resp.data.msg);
						this.$data.addShow = false;
						this.$data.addOilShow = false;
						if(resp.data.success) {
							debugger;
							this.queryParamGrid();
							this.queryParamSetTree();
						}
					}, function(error) {})
				}
				debugger;
			},
			saveBrand: function() {
				debugger;
				this.$http({
					method: 'POST',
					url: this.API_ROOT + '/oil/updateGroup',
					body: this.$data.requestData,
					params: {}
				}).then(function(resp) {
					this.$message(resp.data.msg);
					this.$data.addShow = false;
					this.$data.addOilShow = false;
					if(resp.data.success) {
						debugger;
						this.queryParamGrid();
						this.queryParamSetTree();
					}
				}, function(error) {})

				debugger;
			},
			delteConfirm: function() {
				debugger;
				if(this.$data.multipleSelection.length != 1) {

					this.$message("请选择一条数据！");
					return;
				}
				if(this.$data.multipleSelection[0].level == "0" || this.$data.multipleSelection[0].level == "1") {
					this.$confirm('此操作将会把该组下的所有数据删除, 是否继续?', '提示', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning'
					}).then(() => {
						this.deleteGroup();

					}).catch(() => {
						this.$message({
							type: 'info',
							message: '已取消删除'
						});
					});
				} else {
					this.deleteGroup();
				}
			},
			deleteGroup: function() {
				debugger;
				this.$http.get(this.API_ROOT + '/oil/deleteGroup', {
					params: {
						id: this.$data.multipleSelection[0].id,
						level: this.$data.multipleSelection[0].level
					}
				}).then((response) => {

					if(response.data.success) {
						this.$message({
							type: 'success',
							message: '删除成功!'
						});

						this.queryParamGrid();
						this.queryParamSetTree();

					} else {
						this.$message("删除失败！");
					}

				}, (response) => {});

			},
			edit: function() {

				this.add();
				debugger;

				this.$http.get(this.API_ROOT + '/oil/info', {
					params: {
						id: this.$data.multipleSelection[0].id
					}
				}).then((response) => {

					if(response.data.success) {
						debugger;
						this.$data.requestData = response.data.data;
						this.$data.level = response.data.data.level;
						this.$data.pId = response.data.data.pId;
						this.$data.brandName = response.data.data.oilBrand;

						if(this.$data.level == '2') { // 新增2层数据
							this.$data.addOilShow = true;
						} else {
							this.$data.addShow = true;
						}

					} else {
						this.$message("查询失败！");
					}

				}, (response) => {});
			},

			//查询数据树
			queryParamSetTree: function() {
				this.$data.paramSetTreeData = [];
				//获取资源树
				this.$http.get(this.API_ROOT + '/oil/getDataTree', {}).then((response) => {
					debugger;
					this.$data.paramSetTreeData = response.data.dataList;
				}, (response) => {});
			},

			//分页查询
			handleCurrentChange: function() {

			},

			//点击资源树节点
			handleNodeClick(data) {

				debugger;
				this.$data.requestData.oilBrand = data.oilBrand;
				this.$data.requestData.pId = data.id;
				//this.$data.level = Number(data.level)+1;
				this.$data.requestData.level = Number(data.level) + 1;
				this.$data.pId = data.id;
				this.$data.brandName = data.oilBrand;
				this.queryParamGrid();
			},
			//查询
			queryParamGrid: function() {
				debugger;
				//this.$data.level = "0";
				//this.$data.pId = "";
				this.$http.get(this.API_ROOT + '/oil/page', {
					params: {
						level: this.$data.requestData.level,
						pId: this.$data.requestData.pId,
						start: this.$data.curPage,
						limit: this.$data.page.pageSize
					}
				}).then((response) => {
					this.$data.params.total = Number(response.data.total);
					this.$data.params.dataList = response.data.dataList;
					debugger;
				}, (response) => {});
			},

			//状态转换
			statusCov: function(row, column) {
				return row.status == 1 || row.status == "1" ? "已启用" : "已停用";
			},
			//资源类型转换
			typeCov: function(row, column) {
				return row.type == "0" || row.type == 0 ? "分组" : "参数";
			},

			//资源类型转换
			valueCov: function(row, column) {
				if(row.valueType == null || row.valueType == "") {
					return "";
				}
				return(row.valueType == "0" || row.valueType == 0) ? "数字" : "字符";
			},

		},
		//组件创建时
		created: function() {
			//查询参数树
			this.queryParamSetTree();

			this.queryParamGrid(); // 查询列表
		}

	};
</script>
<style>

</style>